<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>质量在线|邀请函</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="wp">
    <div class="wp-inner"  id="wp-inner">
        <div class="page bg1">
            <h1 class="page1title">质量在线</h1>
            <img class="page1titleIcn" src="./images/page1bimg1.png" alt=""/>
            <div class="page1cont">
                <img src="./images/yao.png" class="yao" alt=""/>
                <img src="./images/qing.png" class="qing" alt=""/>
                <img src="./images/han.png" class="han" alt=""/>
                <img src="./images/inv.png" class="inv" alt=""/>
            </div>
            <img class="page1hua" src="./images/page1bimg0.png" alt=""/>
            <div class="huahzi">华质<i></i>检测</div>
            <div class="leftScroll"><img src="./images/scrollLeft1.png" alt=""/></div>
        </div>
        <div class="page bg2">
            <div class="cont">
                <img class="page2Til mt-20" src="./images/til1.png" alt=""/>
                <p class="mt-30 pge2text1">2015年5月，国务院印发《中国制造2025》规划，“提质增效”成为中国企业未来十年面临的重大课题。</p>
                <p class="mt-20 pge2text2">作为专业的质量工程技术服务机构，华质检测有责任在此次“质量强国”的浪潮中贡献我们的力量。</p>
                <h3 class="page2Til1 mt-40"> <i class="tilion"></i>关于华质检测</h3>
                <p class="mt-40 pge2text3">华质检测依托中国航空综合技术研究所，致力于联合国内外权威的质量可靠性专家、专业咨询机构、质量检测机构，搭建国内一流的质量可靠性技术服务平台，为企业提供全面的质量可靠性解决方案。</p>
            </div>
            <div class="leftScroll"> <img src="./images/scrollLeft2.png" alt=""/></div>
        </div>
        <div class="page bg2 ">
            <div class="cont pge3text3">
                <h3 class="page3Til1 mt-30"> <i class="tilion"></i>关于质量在线</h3>
                <p class="pge3text1 mt-30">质量在线将聚合一流的专家团队、专业信息和专业工具等资源，为企业/产品提供多渠道质量工程技术服务：</p>
                <div class="mt-20 pbox clearfix">
                    <span class="pge3text2-1">知识库：</span><span class="pge3text2-2">为用户提供专业知识查阅、下载等服务；</span>
                </div>
                <div class="mt-20 pbox clearfix" >
                    <span class="pge3text3-1">工具库：</span><span class="pge3text3-2">提供领域内软件工具的查询与下载，包括华质检测独有的“质量可靠性在线检测与评价”云服务；</span>
                </div>
                <div class="mt-20 pbox clearfix">
                    <span class="pge3text4-1">专家库：</span><span class="pge3text4-2">国内外权威专家/资讯机构为企业提供质量可靠性方面的问题诊断、解决方案等全方位服务；</span>
                </div>
            </div>
            <div class="leftScroll"> <img src="./images/scrollLeft2.png" alt=""/></div>
        </div>

        <div class="page bg2">
            <form>
            <div class="cont">
                <p class="pge4text1 mt-20">质量在线将整合一流的质量可靠性“名医”共同“坐堂会诊”，诊企业质量管控之病因，医产品质量缺陷之痼疾。华质检测诚邀您的加入！</p>
                <div class="pge4text2 mt-30">为此，请您提供以下资料：</div>
                <div class="inp inp1 mt-30"><input name="Username" placeholder="姓名" type="text"/></div>
                    <div class="clearfix">
                        <div class="inp inp2 mt-20 inp2-1">
                            <input id="Userpir" name="Userpir" class="inp2-2" placeholder="个人照片" type="text"/>
                        </div>
                        <input type="file" accept="image/png,image/jpg" style="display: none" id="fileIpt"/>
                        <label class="inp2-3 mt-20" for="fileIpt">上传</label>
                    </div>
                    <div class="inp inp3 mt-20"><input name="Userwork" placeholder="所在单位" type="text"/></div>
                    <div class="inp inp4 mt-20 place1">
                        <textarea name="Usermajor" class="place"></textarea>
                    </div>
                    <div class="inp inp5 mt-20"><input name="hangye" placeholder="所在行业" type="text"/></div>
            </div>
            <div class="leftScroll"> <img src="./images/scrollLeft2.png" alt=""/></div>
            </form>
        </div>
        <div class="page bg2">
            <form>
            <div class="cont">
                <div class="page5inp inp6 place2">
                    <textarea class="place" name="Userresume"></textarea>
                </div>
                <div class="page5inp inp7 mt-20"><input name="Userzhuozuo" placeholder="个人著作 " type="text"/></div>
                <div class="page5inp inp8 mt-20 place3">
                    <textarea class="place" name="Userchengjiu"></textarea>
                </div>
                <div class="page5inp inp9 mt-30"><input name="Usermob" placeholder="联系方式" type="text"/></div>
                <div class=" inp9 mt-30"><button id="subBtn"  type="button" class="subBtn">提交</button></div>
                <p class="mt-40 page5text1">       让我们携手为“质量强国”贡献自己的力量！</p>
                <p class="mt-20 page5text2">期待入驻，恭候大驾！</p>
                <div class="clearfix mt-20">
                    <span class="fr logo1"><img src="./images/logo1.png" alt=""/>华质检测</span>
                </div>
            </div>
            <div class="leftScroll"> <img src="./images/scrollLeft2.png" alt=""/></div>
            </form>
        </div>
        <div class="page bg1">
            <div class="page6Top">
                <h1 class="page1title">联系我们</h1>
                <img class="page1titleIcn" src="./images/page1bimg1.png" alt=""/>
            </div>
            <img src="./images/RQ.png" class="rq" alt=""/>
            <h4 class="page6Fot">华质检测 ,重塑企业质量未来</h4>
            <img class="page6hua" src="./images/page1bimg0.png" alt=""/>
        </div>
    </div>
</div>
<div class="mskTe"></div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/zepto.fullpage.js"></script>
<script type="text/javascript">
    $(function(){
        var boHe = $('body')[0].clientHeight;
        $('.wp').height(boHe);
        $('.wp-inner').height(boHe);
        $('.page').height(boHe);

        $('#wp-inner').fullpage({
            dir: 'h',
            afterChange: function (obj) {
                var cur = obj.cur+1,prev = obj.prev+1;
                $('.page').eq(obj.cur) .addClass('page'+cur);
                $('.page').eq(obj.prev) .removeClass('page'+prev);
            }
        });

//       弹窗
        function msk(te){
            $('.mskTe').show().html(te)
            setTimeout(function(){
                $('.mskTe').hide()
            },1500)
        }

//        提交
        $('#subBtn').on('click',function(){
            var dataarr1 = $('form').eq(0).serializeArray(),dataarr2 = $('form').eq(1).serializeArray();
            var dataARR = dataarr1.concat(dataarr2);
            var dataobj=new Object();
            $.each(dataARR,function(index,param){
                if(!(param.name in dataobj)){
                    dataobj[param.name]=param.value;
                }
            });
            console.log(dataobj.Userchengjiu);
            if(dataobj.Username==''||dataobj.Username==undefined){
                return msk('请填写姓名');
            }
            if(dataobj.Usermob==''||dataobj.Usermob==undefined){
                return msk('请填写联系方式');
            }

            $.ajax({
                url:'',
                type: 'POST',
                data: dataobj,
                dataType: 'JSON',
                success:function(data){
                    if(data.code==1000){
                        msk('上传成功');
                    }
                }
            })

        })

//        图片提交
        var fileIpt = document.getElementById("fileIpt");
        //这边是判断本浏览器是否支持这个API。
        if(typeof FileReader==='undefined'){
            alert("抱歉，你的浏览器不支持 FileReader")
            fileIpt.setAttribute('disabled','disabled');
        }else{
            fileIpt.addEventListener('change',readFile,false);
        }
        function readFile(){
            var fileObj = document.getElementById("fileIpt").files[0];
            var FileController ="./index";
            var form = new FormData();
            form.append("file", fileObj);
            $.ajax({
                url:FileController,
                type: 'POST',
                data: form,
                dataType: 'JSON',
                cache: false,
                processData: false,
                contentType: false,
                success:function(data){
                    msk('上传成功');
                    $('.Userpir').val(data.rs)
                }
            })
        }

        $('.place').on('input',function(){
            var place;
            if($(this).parent().hasClass('inp4')){
                place='place1';
            }else if($(this).parent().hasClass('inp6')){
                place='place2';
            }else if($(this).parent().hasClass('inp8')){
                place='place3';
            }
            console.log(place);
            if(''==$(this).val()){
                $(this).parent().addClass(place)
            }else{
                $(this).parent().removeClass(place)
            }
        })

    })

</script>
</body>
</html>
